@use "../../styles/mixin.scss" as *;

.file-library-btn {
  cursor: pointer;
  display: inline-flex;
}
.file-library-dialog-cont {
  display: flex;
  .left {
    display: flex;
    flex-direction: column;
    .btn-group {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 5px;
      & > * {
        max-width: 150px;
        margin-right: 10px;
        margin-left: 0;
        margin-bottom: 10px;
        &:last-child {
          margin-right: 0;
        }
      }
    }

    :deep(.el-table){
      width: calc(100% - 14px);
    }

    .table-page-nav{
      display: flex;
      justify-content: flex-end;
      margin: 20px 0;
      padding-right: 8px;
    }

    .pic-list-box {
      @include scrollBar;
      margin: -6px 0 0 -6px;
      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: flex-start;
      overflow-y: auto;
      height: 480px;
    }

    .thumbnail {
      position: relative;
      border-radius: var(--el-border-radius-small);
      cursor: pointer;
      padding: 6px;
      .pic-item {
        // padding: 3px;
        background-color: #fff;
        border: var(--el-border);
        width: 100%;
        height: 100%;
        position: relative;
        &:deep(img) {
          border-radius: var(--el-border-radius-small);
        }
      }
      &.selected {
        .pic-item{
          border-color: var(--el-color-primary-light-2);
          &::after{
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color:var(--el-color-primary-light-2);
            opacity: .4;
          }
        }
      }
      &.upload {
        .pic-item{
          border: 1px dashed var(--el-border-color);
          display: flex;
          justify-content: center;
          align-items: center;
          &:hover {
            border-color: var(--el-color-primary);
          }
        }
      }
    }
  }
  .right {
    background: var(--el-color-info-light-9);
    border-radius: var(--el-border-radius-small);
    padding: 20px;
    overflow-y: auto;
    @include scrollBar;

    &:deep(.el-form-item) {
      margin-bottom: 10px;
      &:not(.text){
        flex-wrap: wrap;
      }
      &:last-child {
        margin-bottom: 0;
      }
      &:not(.text) .el-form-item__content{
        min-width: 192px;
      }
    }

    h5 {
      font-weight: bold;
      line-height: 1;
      margin-bottom: 20px;
    }
    .form-item-text {
      font-size: 12px;
      color: var(--el-text-color-secondary);
      line-height: 1;
      margin-top: 6px;
      margin-left: 4px;
    }
    .preview-img {
      position: relative;
      width: 100%;
      height: 120px;
      padding: 3px;
      border: var(--el-border);
      background: var(--el-color-info-light);
      &:hover::after {
        content: "";
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 120px;
        position: absolute;
        top: 0;
        left: 0;
        color: var(--el-color-info-light-9);
        pointer-events: none;
        background: rgba(255, 255, 255, 0.4);
      }
    }
    .preview-icon {
      position: absolute;
      bottom: 10px;
      right: 1px;
      pointer-events: none;
      background: rgba(0, 0, 0, 0.1);
      box-sizing: content-box;
      padding: 2px;
    }
    .upload-inline {
      display: inline;
      cursor: pointer;
      border-bottom: 1px solid var(--el-color-primary);
    }
  }
}
@media screen and (min-width: 1671px) {
  .file-library-dialog-cont {
    .left {
      width: 900px;
      .thumbnail {
        width: 150px;
        height: 150px;
      }
    }
    .right {
      width: calc(100% - 900px);
    }
  }
}
@media screen and (max-width: 1670px) and (min-width: 1421px) {
  .file-library-dialog-cont {
    .left {
      width: 760px;
      .thumbnail {
        width:152px;
        height: 152px;
      }
    }
    .right {
      width: calc(100% - 760px);
    }
  }
}
@media screen and (max-width: 1420px) and (min-width: 1171px) {
  .file-library-dialog-cont {
    .left {
      width: 580px;
      .thumbnail {
        width: 145px;
        height: 145px;
      }
    }
    .right {
      width: calc(100% - 580px);
    }
  }
}
@media screen and (max-width: 1170px) and (min-width: 1001px) {
  .file-library-dialog-cont {
    .left {
      width:460px;
      .thumbnail {
        width: 153px;
        height: 153px;
      }
    }
    .right {
      width:  calc(100% - 460px);
    }
  }
}
@media screen and (max-width: 1000px) and (min-width: 851px) {
  .file-library-dialog-cont {
    .left {
      width: 340px;
      .thumbnail {
        width: 110px;
        height: 110px;
      }
    }
    .right {
      width: calc(100% - 340px);
    }
  }
}
@media screen and (max-width: 850px)  {
  .file-library-dialog-cont {
    .left {
      width: 230px;
      .btn-group {
        & > * {
          max-width: unset;
        }
      }
      .pic-list-box{
        height: 425px;
      }
      .thumbnail {
        width: 110px;
        height: 110px;
      }
    }
    .right {
      width: calc(100% - 230px);
      padding: 20px;
      &:deep(.el-form-item){
        .el-form-item__label{
          font-size: 90%;
          height: 28px;
          line-height: 28px;
        }
        .el-form-item__content{
          font-size: 90%;
          line-height: 28px;
        }
      }
      h5{
        margin-bottom: 10px;
      }
      .preview-img{
        height: 100px;
      }
    }
  }
}
@media screen and (max-width: 710px)  {
  .file-library-dialog-cont {
    .right {
      &:deep(.el-form-item){
        margin-bottom: 0;
      }
    }
  }
}